<!-- src/views/add_video.vue -->
<template>
  <div class="container">
    <h2>添加视频源</h2>
    <form @submit.prevent="submitVideo">
      <div class="form-group">
        <label for="video_url">视频链接：</label>
        <input type="url" id="video_url" v-model="formData.url" required class="form-control"/>
      </div>

      <div class="form-group">
        <label for="title">视频标题：</label>
        <input type="text" id="title" v-model="formData.title" required class="form-control"/>
      </div>

      <div class="form-group">
        <label for="car_brand">车型品牌：</label>
        <input type="text" id="car_brand" v-model="formData.carBrand" class="form-control"/>
      </div>

      <button type="submit" class="btn btn-primary">提交</button>
    </form>

    <div v-if="responseMessage" class="alert mt-3" :class="{'alert-success': success, 'alert-danger': !success}">
      {{ responseMessage }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        url: '',
        title: '',
        carBrand: ''
      },
      responseMessage: '',
      success: false
    };
  },
  methods: {
    async submitVideo() {
      try {
        const res = await fetch('http://localhost:5000/api/video', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            video_url: this.formData.url,
            title: this.formData.title,
            car_brand: this.formData.carBrand
          })
        });

        const result = await res.json();
        this.responseMessage = result.message || '✅ 成功';
        this.success = true;
      } catch (error) {
        this.responseMessage = '❌ 提交失败，请检查后端是否运行';
        this.success = false;
        console.error(error);
      }
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: auto;
  padding: 2rem;
}
.form-group {
  margin-bottom: 1rem;
}
.form-control {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
.btn {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 0.25rem;
}
.alert {
  padding: 1rem;
  margin-top: 1rem;
}
.alert-success {
  background-color: #d4edda;
  color: #155724;
}
.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}
</style>